<template>
	<el-row :gutter="15" class="personal-recommend-row">
		<el-col @click="onClick(leafItem)" :sm="6" v-for="(leafItem, k) in props.menuList" :key="k" class="personal-recommend-col">
			<div class="personal-recommend" :style="{ 'background-color': leafItem.meta.bgColor||'var(--el-color-primary)' }">
				<SvgIcon :name="leafItem.meta.icon" :size="60" :style="{ color: leafItem.meta.color||'var(--el-color-primary-light-2)' }" />
				<div class="personal-recommend-auto">
					<div>{{ leafItem.meta.title }}</div>
				</div>
			</div>
		</el-col>
	</el-row>
</template>
<script lang="ts" setup name="commonMemuPage">
import { useRouter } from 'vue-router';
import { verifyUrl } from '@/utils/toolsValidate';
const router = useRouter();
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	menuList: {
		type: Array,
		default: () => [],
	},
});
const onClick = (val: any) => {
	router.push(val.path);
	if (verifyUrl(val.meta.isLink)) {
		const { origin, pathname } = window.location;
		if (verifyUrl(val.meta.isLink)) window.open(val.meta.isLink);
		else window.open(`${origin}${pathname}#${val.meta.isLink}`);
	}
};
</script>
<style scoped lang="scss">
.personal-recommend-row {
	.personal-recommend-col {
		margin-bottom: 15px;
        &:hover {
            .personal-recommend {
                background-color:#FFFFFF !important;
                box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.15);
                border-color: rgba(0, 0, 0, 0.15);
                .personal-recommend-auto {
                    color: var(--el-color-primary);
                }
            }
        }
		.personal-recommend {
			position: relative;
			height: 80px;
			border-radius: 6px;
			overflow: hidden;
			cursor: pointer;
			&:hover {
				i {
					right: 0px !important;
					bottom: 0px !important;
					transition: all ease 0.3s;
				}
			}
			i {
				position: absolute;
				right: -10px;
				bottom: -10px;
				font-size: 70px;
				transform: rotate(-30deg);
				transition: all ease 0.3s;
			}
			.personal-recommend-auto {
				padding: 10px 20px;
				position: absolute;
				left: 0;
				font-size: 20px;
				color: var(--next-color-white);
				.personal-recommend-msg {
					font-size: 16px;
					margin-top: 10px;
				}
			}
		}
	}
}
</style>
